<template>
  <div>
    <TripView :list="info.list" @getDetail="getDetail"></TripView>

    <div v-show="detailFlag" style="position: fixed; right: 0">
      <h3>显示详情</h3>
      <div v-for="(item, index) in detailList" :key="index">
        <div>日期 {{ item.date }}</div>
        <div>安排 {{ item.msg }}</div>
        <button @click="delDetail(item.id)">删除</button>
      </div>
    </div>

    <div v-show="addDetailFlag" style="position: fixed; right: 0">
      <h2>新增详情</h2>
      <div>安排 <input v-model="msg" /></div>
      <button @click="add">新增</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TripView from '../components/TripView.vue'

let info = ref({
  list: [
    { id: 1, date: '2023-9-10', msg: '教师节' },
    { id: 2, date: '2023-10-1', msg: '放假' },
    { id: 3, date: '2023-9-16', msg: '上午上课' },
    { id: 4, date: '2023-9-16', msg: '下午看医生' }
  ]
})
let detailFlag = ref(false) //控制详情的显示
let addDetailFlag = ref(false) //新增的控制
let detailList = ref([]) //详情的列表

let msg = ref('') //新增的内容
let date = ref('') //新增的日期  (点的位置决定新增的日期)

let delDetail = (id) => {
  info.value.list = info.value.list.filter((item) => item.id != id)
  detailFlag.value = false
}
let add = () => {
  let str = msg.value;
  let  id  =1;
  let  list  = info.value.list;
  if(list.length){
    id  = list.map(item=>item.id).sort((a,b)=>b-a)[0]+1;
  };//模拟数据
  info.value.list.push({
    id,
    date: date.value,
    msg: str
  })
  msg.value  = "";//清空
  addDetailFlag.value = false;

}
let getDetail = (detail) => {
  detailFlag.value = false //关闭
  addDetailFlag.value = false //关闭
  if (detail.remarkList.length) {
    detailFlag.value = true
    detailList.value = detail.remarkList
  } else {
    //显示新增
    date.value = detail.str
    addDetailFlag.value = true
  }
}
</script>

<style></style>
